<template>
    <div class="nationalIndexBar_container">
		<van-index-bar :index-list="indexBarList">
			<div v-for="(val , ind) in indexBarList" :key="ind" class="indexBar_item">
				<van-index-anchor :index="val">{{ val }}</van-index-anchor>
				<van-cell v-for="(item , index) in nationList[val]" :key="index" :value="item.tel" :title="item.name_zh"  is-link @click="handleClick(item)">
					<template #icon>
						<img :src="disposeImgUrl(item.short_lower)" alt="">
					</template>
				</van-cell>
			</div>
		</van-index-bar>
	</div>
</template>

<script>
import countryList from "@/assets/json/countryList.json";
export default {
	name: "NationalIndexBar",
	data(){
		return{
			indexBarList:[],
			nationList:{}
		}
	},
	mounted(){
		this.disposeIndexBarList()
	},
	methods:{
		disposeIndexBarList(){
			this.indexBarList = Array.from({length: 26}, (_, i) => String.fromCharCode(97 + i));
			this.disposeData()
		},
		disposeImgUrl(item){
			return require(`@/image/nationalFlagImg/${item}.png`);
		},
		disposeData() {
			// 处理分组逻辑
			const grouped = {};
			countryList.forEach(country => {
				const firstLetter = country.short_lower[0].toUpperCase();
				if (!grouped[firstLetter]) {
				grouped[firstLetter] = [];
				}
				grouped[firstLetter].push(country);
			});

			// 生成有效字母列表
			this.indexBarList = Object.keys(grouped).sort();
			this.nationList = grouped;
		},
		handleClick(item){
			// 点击跳转回手机号设置页面
			if(this.$route.name != 'PersonalSettingAuthentication'){
				sessionStorage.setItem('country', JSON.stringify(item))
				this.$router.replace({
					name: 'PersonalSettingAuthentication',
				})
			}
		}
	}
};
</script>

<style>
</style>